<template>
  <div class="m-dashboard">
    <div class="g-container">
      <div class="g-content">
        <div>
          <x-data-table
            ref="tableRef"
            v-model:immediate="immediate"
            :params="paginationParams"
            :columns="columns"
            :row-key="(row) => row.id"
            row-class-name="text-sm"
            max-height="infinite"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, h } from 'vue'
  import { XDataTable } from '@/components'
  import { NText, NSpace } from 'naive-ui'
  import { roleList } from '@/api/system'
  const immediate = ref(true)
  const paginationParams = computed(() => {
    return {
      actions: 'system/roleList'
    }
  })
  const columns = ref([
    {
      title: '岗位ID',
      key: 'id',
      width: 120
    },
    {
      title: '岗位名称',
      key: 'roleName',
      width: 120
    },
    {
      title: '岗位描述',
      key: 'roleDesc',
      width: 120
    },
    {
      title: '员工数量',
      key: 'accountCount',
      width: 120
    },
    {
      title: '创建时间',
      key: 'action',
      width: 120,
      render(row: any) {
        return h(NSpace, () => [h(NText, {}, () => row.createdAt)])
      }
    }
  ])
</script>

<style lang="scss" scoped></style>
